<script setup lang="ts">
import AuthPage from '@/components/auth-page/auth-page.vue'
const windowInfo = uni.getWindowInfo()
//
</script>

<template>
  <AuthPage>
    <scroll-view>
      <view class="index-page" :style="{ paddingTop: windowInfo.safeArea.top + 'px' }">
        <!-- 页面导航 -->
        <view class="page-navbar">优医</view>

        <!-- 搜索栏 -->
        <view class="search-bar">
          <input
            placeholder-class="input-placeholder"
            placeholder="搜一搜: 疾病/症状/医生/健康知识"
            class="input"
            type="text"
          />
          <view class="icon-search">
            <uni-icons size="22" color="#C3C3C5" type="search" />
          </view>
        </view>
        <!-- 快速入口 -->
        <view class="quick-entry">
          <navigator hover-class="none" url="" class="quick-entry-item">
            <view class="">
              <image class="quick-entry-icon" src="/static/images/quick-entry-1.png" />
              <text class="label">问医生</text>
            </view>
            <text class="small">按科室查问医生</text>
          </navigator>
          <navigator
            hover-class="none"
            class="quick-entry-item"
            url="/subpkg_consult/pages/quickly/quickly"
          >
            <view class="">
              <image class="quick-entry-icon" src="/static/images/quick-entry-2.png" />
              <text class="label">极速问诊</text>
            </view>
            <text class="small">20s医生极速回复</text>
          </navigator>
          <navigator hover-class="none" url="" class="quick-entry-item">
            <view class="">
              <image class="quick-entry-icon" src="/static/images/quick-entry-3.png" />
              <text class="label">开药门诊</text>
            </view>
            <text class="small">线上买药更方便</text>
          </navigator>
        </view>
        <!-- 快速查看 -->
        <view class="quick-view">
          <navigator hover-class="none" url="/subpkg_medicine/order_list/index">
            <view class="quick-view-item">
              <image class="quick-view-icon" src="/static/images/quick-view-1.png" />
              <text class="label">药品订单</text>
            </view>
          </navigator>
          <navigator hover-class="none" url="/subpkg_archive/list/index">
            <view class="quick-view-item">
              <image class="quick-view-icon" src="/static/images/quick-view-2.png" />
              <text class="label">健康档案</text>
            </view>
          </navigator>
          <navigator hover-class="none">
            <view class="quick-view-item">
              <image class="quick-view-icon" src="/static/images/quick-view-3.png" />
              <text class="label">我的处方</text>
            </view>
          </navigator>
          <navigator hover-class="none">
            <view class="quick-view-item">
              <image class="quick-view-icon" src="/static/images/quick-view-4.png" />
              <text class="label">疾病查询</text>
            </view>
          </navigator>
        </view>
        <!-- 广告位 -->
        <view class="banner-placeholder">
          <swiper
            class="uni-swiper"
            indicator-dots
            indicator-color="#ffffff99"
            indicator-active-color="#fff"
            circular
          >
            <swiper-item>
              <navigator hover-class="none" class="navigator" url=" ">
                <image class="banner-image" src="/static/images/banner-1.png" />
              </navigator>
            </swiper-item>
            <swiper-item>
              <navigator hover-class="none" class="navigator" url=" ">
                <image class="banner-image" src="/static/images/banner-1.png" mode="aspectFill" />
              </navigator>
            </swiper-item>
          </swiper>
        </view>
        <!-- 标签页列表 -->
        <!-- <custom-tab :data="[]"></custom-tab> -->

        <!-- 列表 -->
        <view class="feed-list">
          <view class="feed-list-item" v-for="item in 10" :key="item">
            <view class="feed-meta">
              <image class="doctor-avatar" src="/static/uploads/doctor-avatar.jpg" />
              <view class="doctor-info">
                <text class="name">王医生</text>
                <text class="desc">积水潭 皮肤科 主任医师</text>
              </view>
              <button class="doctor-button" plain>+ 关注</button>
            </view>
            <view class="feed-topic">炎热夏季如何防晒？</view>
            <view class="feed-relation"># 儿童健康</view>
            <view class="feed-content">
              <view class="text">
                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的
              </view>
              <view class="picture">
                <image mode="aspectFill" class="uni-image" src="/static/uploads/feed-1.jpeg" />
                <image mode="aspectFill" class="uni-image" src="/static/uploads/feed-2.jpeg" />
                <image mode="aspectFill" class="uni-image" src="/static/uploads/feed-3.jpeg" />
              </view>
            </view>
            <view class="feed-extra">
              <text>12 收藏</text>
              <text>120 评论</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </AuthPage>
</template>

<style lang="scss">
@import './index.scss';
</style>
